<script setup>
	import { useRouter } from 'vue-router';
	import { get, post, setBaseApi, api } from '@/api/http/index';
	import { ref, reactive } from 'vue';
	import { formatDay } from '@/utils/date';
	import { showToast } from 'vant';

	import { useGlobalStore, useAuthStore } from '@/stores';
	const { isOlderUI } = useGlobalStore();
	const { userInfo } = useAuthStore();

	const router = useRouter();

	setBaseApi(api + '/front-order/visitOrder/');

	const formData = reactive({
		type: 0,
		wayType: 0,
		orderSource: 0,
		orderStatus: 0,
		orderType: '0',
	});

	const visitDate = ref('');

	const visitOption = reactive({
		date: [],
		time: [],
	});

	get('orderInfo', { orderType: 0 }).then(({ visitDateList }) => {
		visitOption.date = visitDateList || [];
		if (!visitDateList) return;
		handleDateChange(visitDateList[0].date);
	});

	const handleDateChange = (date, isOpen) => {
		if (isOpen) return showToast('请选择其他日期！');
		formData.orderDate = date; // Todo
		if (date == visitDate.value) return;
		visitDate.value = date;
		visitTime.value = '';
		getTimeOption();
	};

	const getTimeOption = () => {
		get('inLibraryTime', { date: visitDate.value, orderType: 0 }).then((list) => {
			visitOption.time =
				list.map(({ residueNum, startDate, endDate, id }) => ({
					value: id,
					startDate,
					endDate,
					text: `${startDate}-${endDate}    余票：${residueNum}`,
				})) || [];
		});
	};
	const visitTime = ref('');
	const showPicker = ref(false);

	const onTimeChange = ({ selectedOptions }) => {
		const { startDate, endDate, value } = selectedOptions[0];

		formData.startDate = startDate;
		formData.endDate = endDate;
		formData.periodTimeId = value;

		visitTime.value = selectedOptions[0].text?.slice(0, 11);
		showPicker.value = false;
	};

	const handleSubmit = () => {
		const data = {
			...formData,
			orderDate: formData.orderDate + ' 00:00:00',
		};
		data.userDtos = [
			{
				userName: userInfo.contactName,
				phone: userInfo.contactNumber,
				idCard: userInfo.idNo,
				identificationType: 1,
				isLead: 1,
				periodTimeId: formData.periodTimeId,
				orderDate: data.orderDate,
				cancelStatus: 0,
				orderType: '0',
				ticketId: '1359053078609920',
			},
		];
		// console.log(data);

		post('addOrder', data, '提交').then(({ record_id }) => {
			router.push({ path: '/orderDetail', query: { id: record_id } });
		});
	};
</script>

<template>
	<section class="min-h-full p-15px bg-#f3f3f3">
		<header class="bg-#71db8c p-20px text-#fff rounded-15px">
			<p class="text-6">中国湿地博物馆</p>
			<p class="mt-4">开馆时间: 09:00 - 16:00</p>
		</header>
		<div>
			<p>选择参观时间 <span class="text-#71db8c">（可预约四日内）</span></p>
			<ul class="grid grid-cols-4 gap-15px mt-10px">
				<li
					@click="handleDateChange(date, isOpen)"
					class="leading-20px py-8px text-3 rounded-8px text-center"
					:class="isOpen ? 'bg-gray' : visitDate == date ? 'current' : 'border'"
					v-for="({ week, date, isOpen }, index) in visitOption.date"
					:key="index"
				>
					<p>{{ index ? formatDay(week) : '今天' }}</p>
					<p>{{ date?.slice(5) }}</p>
					<p>{{ !isOpen ? '开馆' : '闭馆' }}</p>
				</li>
			</ul>
		</div>
		<div>
			<van-field
				v-model="visitTime"
				is-link
				readonly
				label-width="8em"
				label="选择参观时段"
				placeholder="选择参观时段"
				@click="showPicker = true"
			/>
			<van-popup
				v-model:show="showPicker"
				round
				position="bottom"
			>
				<van-picker
					:columns="visitOption.time"
					@cancel="showPicker = false"
					@confirm="onTimeChange"
				/>
			</van-popup>
		</div>

		<div>
			<van-cell-group inset>
				<!-- 输入任意文本 -->
				<van-field
					v-model="userInfo.contactName"
					label="姓名"
					readonly
				/>
				<!-- 输入手机号，调起手机号键盘 -->
				<van-field
					v-model="userInfo.contactNumber"
					type="tel"
					label="手机号码"
					readonly
				/>

				<!-- 允许输入数字，调起带符号的纯数字键盘 -->
				<van-field
					v-model="userInfo.idNo"
					label="身份证号"
					readonly
				/>
			</van-cell-group>
		</div>
		<footer class="bg-#fff rounded-15px p-20px pb-40px w-[calc(100%-40px)] absolute-lb">
			<van-button
				@click="handleSubmit"
				type="primary"
				round
				:disabled="!visitTime"
				size="large"
				>提交订单</van-button
			>
		</footer>
	</section>
</template>

<style lang="less" scoped>
	section > div {
		padding: 20px;
		background-color: #fff;
		border-radius: 15px;
		margin-top: 10px;
	}
	.current {
		color: #fff;
		background-color: #73bd80;
	}
</style>
